<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-show="flag">我是v-show控制的盒子</div>
    <div v-if="flag">我是v-if控制的盒子</div>
</div>
<script src="vue.js"></script>
<script>
    /**
     * 1. v-show
     * 原理： 切换 display:none 控制显示隐藏
     * 场景：频繁切换显示隐藏的场景
     * 2. v-if
     * 原理： 基于条件判断，是否创建 或 移除元素节点
     * 场景： 要么显示，要么隐藏，不频繁切换的场景
     */
    const app = new Vue({
        el: '#app',
        data: {
            flag: true
        }
    })
</script>
</body>
</html>